<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米官网</title>
    <link href="css/style.css" rel="stylesheet" />
    <script src="lib/jquery-3.2.1.js"></script>
    <link href="https://at.alicdn.com/t/font_2149374_8o5xo82ze2u.css" rel="stylesheet">
  </head>
  <body>
    <!-- 头部区域 -->
    <header>
      <div class="header-title">
        <div class="title-left">
          <a href="">小米网</a>
          |
          <a href="">MIUI</a>
          |
          <a href="">米聊</a>
          |
          <a href="">游戏</a>
          |
          <a href="">多看阅读</a>
          |
          <a href="">云服务</a>
          |
          <a href="">小米网移动版</a>
          |
          <a href="">Select region</a>
          |
          <a href="">米粉节答疑</a>
        </div>
        
        <div class="login">
          <a href="#">注册</a> | 
          <a href="#">登录</a> 
        </div>
      </div>
    </header>
    <div class="container1">

    <!-- 小米logo以及搜索框区域 -->
    <div class="logo">
      <span class="mi_logo"><img src="images/logo.png" /></span>
      <div class="logo-right">
        <p class="kaif">
          <i class="iconfont icon-naozhong"></i>
          4月14日开放购买
        </p>
        <div class="search">
          <input type="text" placeholder="搜索您需要的商品" />
          <a href="#" class="tishi t1">小米手环</a>
          <a href="#" class="tishi t2">耳机音箱</a>
          <a href="#" class="tishi t3">保护壳</a>
          <button class="search_logo"><i class="iconfont icon-sousuo"></i>
        </button>
        </div>
        <button class="btn1">
          <i class="iconfont icon-gouwuche"></i>
          购物车
        </button>
      </div>
    </div>
 
    <!-- 内容主体区域 -->
    <div class="content">
      <!-- 商品分类区域 -->
      <div class="goods_cate">
        <div class="left">
          <div class="all">全部商品分类</div>
          <div class="block phone">
            <p>购买手机</p>
            <a href="#"
              >小米Noto&nbsp;&nbsp;小米4&nbsp;&nbsp;红米&nbsp;&nbsp;红米Noto</a
            >
          </div>
          <div class="block tv">
            <p>购买电视与平板</p>
            <a href="#">小米电视&nbsp;&nbsp;小米盒子&nbsp;&nbsp;小米平板</a>
          </div>
          <div class="block lyq">
            <p>路由器与智能硬件</p>
            <a href="#">路由器&nbsp;&nbsp;体重秤&nbsp;&nbsp;净化器与滤芯</a>
          </div>
          <div class="block cxb">
            <p>插线板、移动电源与电池</p>
            <a href="#">小米移动电源&nbsp;&nbsp;电池&nbsp;&nbsp;充电器</a>
          </div>
          <div class="block ej">
            <p>耳机音箱与存储卡</p>
            <a href="#">小米头戴式耳机&nbsp;&nbsp;小米活塞耳机</a>
          </div>
          <div class="block tm">
            <p>保护套与贴膜</p>
            <a href="#">保护套/贴膜&nbsp;&nbsp;贴膜&nbsp;&nbsp;防尘塞</a>
          </div>
          <div class="block hg">
            <p>后盖与个性化配件</p>
            <a href="#"
              >米键&nbsp;&nbsp;后盖&nbsp;&nbsp;贴纸&nbsp;&nbsp;手机支架</a
            >
          </div>
          <div class="block fs">
            <p>小米生活方式</p>
            <a href="#"
              >服装&nbsp;&nbsp;米兔&nbsp;&nbsp;背包&nbsp;&nbsp;生活周边</a
            >
          </div>
        </div>
        <div class="right">
          <div class="title">
            <span>首页</span>
            <span>小米手机</span>
            <span>红米</span>
            <span>小米平板</span>
            <span>小米电视</span>
            <span>盒子</span>
            <span>路由器</span>
            <span>合约机</span>
            <span>服务</span>
            <span>社区</span>
          </div>
          <!-- 轮播图区域 -->
          <div class="photos">
            <div class="box">
              <img src="images/banner5.png">
              <img src="images/banner2.png" />
              <img src="images/banner3.png" />
              <img src="images/banner4.png" />
              <img src="images/banner1.png" />
            </div>
            <button class="prev"></button>
            <button class="next"></button>
            <div class="btns">
              <span class="current">1</span>
              <span>2</span>
              <span>3</span>
              <span>4</span>
              <span>5</span>
            </div>
          </div> 
          <div class="box1 hm2"><img src="images/03.png" /></div>
          <div class="box1 xm4"><img src="images/02.png" /></div>
          <div class="box1 xmnoto"><img src="images/01.png" /></div>
        </div>
      </div>
      <!-- 明星单品 -->
      <div class="start_goods">
        <p class="start_title">小米明星单品<span>根据机型选配件</span></p>
        <span class="jt">
          <img class="zjt" src="images/05.png" />
          <span class="line"></span>
          <img class="yjt" src="images/06.png" />
        </span>
        <div class="goods_img">
          <div class="img1">
            <img src="images/T1PxJvBCAT1RXrhCrK!220x220.jpg">
            <p id="small_title">小米智能插座</p>
            <p id="describe">让普通家电变得智能</p>
          </div> 
          <div class="img1">
            <img src="images/T1XYxTBsAT1RXrhCrK!220x220.jpg">
            <p id="small_title">小米空气净化器</p>
            <p id="describe">高性能智能空气净化器立即预约</p>
          </div>
          <div class="img1">
            <img src="images/T1y0JTBy_T1RXrhCrK!220x220.jpg">
            <p id="small_title">小米活塞耳机简装版</p>
            <p id="describe">好声音远自活塞式音腔，延续经典设计</p>
          </div>
          <div class="img1">
            <img src="images/aa.jpg">
            <p id="small_title">小米路由器</p>
            <p id="describe">顶级双屏幕AC智能路由器，内置1TB大硬盘</p>
          </div>
        </div>
      </div>
      <!-- 新品上架 -->
      <div class="new_goods">
        <span class="new_title">新品上架</span>
        <a href="#">
          更多&nbsp;>
        </a>
        <div class="container">
          <div class="aside">
            <div class="box2">
              <img src="images/fanghezi0407xiao.jpg">
            </div>
            <div class="box3">
              <p>
                小米手环<br>
                <span>79元</span> 
              </p>
              <img src="images/T1qaVvB7CT1RXrhCrK!220x220.jpg">
            </div>
            <div class="box4">
              <p>
                5周年米兔钥匙扣<br>
                <span>9.9元</span>
              </p>
              <img src="images/T1TfAgB4KT1RXrhCrK!220x220.jpg">
            </div>
            <div class="box5">
              <p>
                小米T恤路标MILOGO<br>
                <span>39元</span>
              </p>
              <img src="images/T1crEgBCYT1RXrhCrK!220x220.jpg">
            </div>
            <div class="box5">
              <p>
                小米4实木后盖<br>
                <span>69元</span>
              </p>
              <img src="images/T12qZvB7CT1RXrhCrK!220x220.jpg">
            </div>
            <div class="box4 earphone">
              <p>
                QCY派Q8蓝牙耳机<br>
                <span>59.9元</span>
              </p>
              <img src="images/T1SrKTBmWT1RXrhCrK!220x220.jpg">
            </div>
            <div class="box5 phone-box">
              <p>
                小米Note超薄保护壳<br>
                <span>49元</span>
              </p>
              <img src="images/baohuke.png">
            </div>
            <div class="box5">
              <p>
                小米自拍杆<br>
                <span>49元</span>
              </p>
              <img src="images/T1DrL_B4CT1RXrhCrK!220x220.jpg">
            </div>
            <div class="box5">
              <p>
                先锋CL31系列耳式耳机<br>
                <span>99元</span>
              </p>
              <img src="images/T1GXxvBsET1RXrhCrK!220x220.jpg">
            </div>
          </div>

          <div class="container-right">
            <div class="right1">
              <span class="cheap">特价商品</span>
              <div class="right1-content">
                <p>SanDisk32GB存储卡</p>
                <span class="now-price">79元</span>
                <span class="old-price">109元</span>
                <p>还有更多特价商品</p>
              </div>
            </div>
            <div class="right2">
              <div class="right1-content">
                <p>特惠配件套餐</p>
                <p>手机必备配件组合购买</p>
                <p>实惠更优惠</p>
              </div>
            </div>
            <div class="right3">
              <div class="right1-content">
                <p>我爱酷玩</p>
                <p>邂逅炫酷的电子产品</p>
                <p>结交趣味相投的朋友</p>
              </div>
            </div>
            <div class="right4">
              <div class="right4-content">
                <a>企业用户采购通道<span class="sp1">></span></a>
                <div class="xian"></div>
                <a style="color: #666;">小米手机防伪查询<span class="sp2">></span></a>
                <div class="xian"></div>
                <a style="color: #666;">小米手机官翻版<span class="sp3">></span></a>
                <div class="xian"></div>
                <a style="color: #666;">小米路由器官翻版<span class="sp4">></span></a>
                <div class="xian"></div>
                <a style="color: #666;">米粉红包<span class="sp5">></span></a>
                <div class="xian"></div>
              </div>
              <div class="phone-pay">
                <p>话费充值</p>
                <input type="text" placeholder="请输入手机号">
                <select>
                  <option value="100" selected>100元</option>
                  <option value="200">200元</option>
                  <option value="300">300元</option>
                  <option value="400">400元</option>
                  <option value="500">500元</option>
                </select>
                <p class="pay-price">实付价格98.4元起</p>
                <button>立即充值</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
    <!-- footer区域 -->
    <div class="footer">
      <div class="footer-container">
        <div class="footer-top">
          <div class="div1">
            <img src="images/10.png">
            <a href="#">1小时快修服务</a>
          </div>
          <div class="div2">
            <img src="images/11.png">
            <a href="#">7天无理由退货</a>
          </div>
          <div class="div3">
            <img src="images/12.png">
            <a href="#">15天免费换货</a>
          </div>
          <div class="div4">
            <img src="images/13.png">
            <a href="#">满150元包邮</a>
          </div>
          <div class="div5">
            <img src="images/14.png">
            <a href="#">520余家售后网点</a>
          </div>
        </div>
        <div class="footer-line"></div>
        <div class="footer-center">
          <div class="center1">
            <p>帮助中心</p>
            <p><a href="#">购物指南</a></p>
            <p><a href="#">支付方式</a></p>
            <p><a href="#">配送方式</a></p>
          </div>
          <div class="center2">
            <p>服务支持</p>
            <p><a href="#">售后政策</a></p>
            <p><a href="#">自助服务</a></p>
            <p><a href="#">相关下载</a></p>
          </div>
          <div class="center3">
            <p>小米之家</p>
            <p><a href="#">小米之家</a></p>
            <p><a href="#">服务网店</a></p>
            <p><a href="#">预约亲临到店服务</a></p>
          </div>
          <div class="center4">
            <p>关于小米</p>
            <p><a href="#">了解小米</a></p>
            <p><a href="#">加入小米</a></p>
            <p><a href="#">联系我们</a></p>
          </div>
          <div class="center5">
            <p>关注我们</p>
            <p><a href="#">新浪微博</a></p>
            <p><a href="#">小米部落</a></p>
            <p><a href="#">官方微信</a></p>
          </div>
          <div class="call-phone">
            <p class="call-num">400-100-5678</p>
            <p class="call-time">周一至周日8:00-18:00</p>
            <p class="beizhu">(仅收市话费)</p>
            <button>24小时在线客服</button>
          </div>
        </div>
        <div class="footer-line  line3"></div>
        <div class="footer-bottom">
          <div class="xiaomi-web">
            <ul>
              <li>小米旗下网站:小米网</li>
              <li>|</li>
              <li>MIUI</li>
              <li>|</li>
              <li>米聊</li>
              <li>|</li>
              <li>多看书城</li>
              <li>|</li>
              <li>小米路由器</li>
              <li>|</li>
              <li>繁体香港</li>
              <li>|</li>
              <li>繁体台湾</li>
              <li>|</li>
              <li>English</li>
              <li>|</li>
              <li>小米后院</li>
              <li>|</li>
              <li>小米天猫店</li>
              <li>|</li>
              <li>小米淘宝直营店</li>
              <li>|</li>
              <li>小米网盟</li>
            </ul>
          </div>
          
          <p>&copy;mi.com京ICP证110507号 京ICP备10046444号 京公网安备1101080212535号 京网文[2014]0059-0009号</p>
          <div class="language">
            <img src="images/16.png">
            <select>
              <option value="简体中文" selected>简体中文</option>
              <option value="英文">英文</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <script>
      var index=0;
      $(".next").click(function(){
        index++;
        if(index>4){
          index = 0;
        }
        animate(index)
      })
      $(".prev").click(function(){
        index--;
        if(index<0){
          index = 4;
        }
        animate(index);
      })
      $(".btns span").click(function(){
        index = $(this).index();
        animate(index);
      })

      function animate(index){
        $(".box img").eq(index).fadeIn().siblings().fadeOut()
        $(".btns span").eq(index).addClass("current").siblings().removeClass("current")
      }
    </script>
  </body>
</html>
